import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  ScrollView,
  Image,
  Text,
  TouchableOpacity
} from 'react-native'

import NavBar from '../../../components/PublicHeader';


export default class qrcode extends Component {
  constructor(props) {
    super(props)
    this.state = {
      qrcodes: {
        userUrl: require('../../../assets/images/maillist/userUrl.png'),
        name: '何某某',
        phone: '15646244612',
        qrcode: require('../../../assets/images/maillist/qrcode.png'),
      },
      flag: this.props.navigation.state.params.data
    }
  }

  componentDidMount = () => {


  }

  render() {
    // 判断个人二维码还是群聊二维码
    let qrcodes = this.state.flag ? (
      <View style={styles.content_view}>
        <Text style={styles.view_name}>{this.state.qrcodes.name}</Text>
        <Text style={styles.view_text}>手机号码：  {this.state.qrcodes.phone}</Text>
        <Text style={styles.view_text}>
          诚信：  <Image source={require('../../../assets/images/maillist/huangxing.png')} />
          <Image source={require('../../../assets/images/maillist/huangxing.png')} />
          <Image source={require('../../../assets/images/maillist/huangxing.png')} />
          <Image source={require('../../../assets/images/maillist/huixing.png')} />
          <Image source={require('../../../assets/images/maillist/huixing.png')} />
        </Text>
      </View>
    ) : (
      <View style={styles.content_view2}>
        <Text style={styles.view2_text}>{this.state.qrcodes.name}</Text>
      </View>
    )
    return (
      <View style={styles.warper}>
        <NavBar
          navigation={this.props.navigation}
          title={this.state.flag ? "我的二维码" : '群二维码'}
        />
        {/* 二维码及个人信息展示 */}
        <ScrollView style={styles.bodys}>
          <View style={styles.qrcode}>
            <View style={styles.qrcode_content}>
              <Image source={this.state.qrcodes.userUrl} />
              {qrcodes}
            </View>
            <View style={styles.qrcodes}>
              <Image source={require('../../../assets/images/maillist/qrcode.png')} />
            </View>
            <Text style={styles.qrcode_text}>扫描二维码添加通讯录</Text>
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  bodys: {
    padding: 15
  },
  qrcode: {
    backgroundColor: '#fff',
    borderRadius: 15,
    padding: 20
  },
  qrcode_content: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
  },
  content_view: {
    marginLeft: 15,
  },
  view_name: {
    fontSize: 20,
    marginTop: -4
  },
  view_text: {
    color: '#0000006E',
    marginTop: 5
  },
  qrcodes: {
    padding: 25,
    alignSelf: 'center'
  },
  qrcode_text: {
    alignSelf: 'center',
    color: '#00000052'
  },
  content_view2: {
    flexDirection: 'column',
    justifyContent: 'center'
  },
  view2_text: {
    includeFontPadding: false,
    textAlignVertical: 'center',
    marginLeft: 20,
    fontSize: 20
  }
})